<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login & Registration Form</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link rel="icon" href="/favicon.png" type="image/png" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
    />
  </head>

  <body>
    <div class="home-nav">
      <a href="/"
        ><i class="fa-solid fa-arrow-left-long"></i>&nbsp; Return to Home</a
      >
      <style>
        .home-nav a {
          text-decoration: none;
          height: 50px;
          width: 250px;
          color: white;
          font-size: 1.25rem;
          position: absolute;
          top: 20px;
          left: 40px;
          background-color: rgba(255, 255, 255, 0.2);
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 30px;
          transition: all 0.4s ease;
        }
        .home-nav a:hover {
          transform: scale(1.02);
          background-color: #fff;
          color: black;
        }
      </style>
    </div>
    <div class="gtranslate_wrapper"></div>
    <script>
      window.gtranslateSettings = {
        default_language: "en",
        native_language_names: true,
        languages: ["en", "fr", "de", "it", "es", "pl", "hi"],
        wrapper_selector: ".gtranslate_wrapper",
        alt_flags: { en: "usa" },
      };
    </script>
    <script
      src="https://cdn.gtranslate.net/widgets/latest/float.js"
      defer
    ></script>
    <div class="wrapper">
      <div class="form-wrapper sign-in">
        <form action="/" method="post">
          <h2>Login</h2>
          <div class="input-group">
            <input type="text" required />
            <label for="">Username</label>
          </div>
          <div class="input-group">
            <input type="password" required />
            <label for="">Password</label>
          </div>
          <div class="remember">
            <label><input type="checkbox" /> Remember me</label>
          </div>
          <button type="submit">Login</button>
          <div class="signUp-link">
            <p>
              Don't have an account?
              <a href="#" class="signUpBtn-link">Sign Up</a>
            </p>
          </div>
        </form>
      </div>

      <div class="form-wrapper sign-up">
        <form action="/" method="post">
          <h2>Sign Up</h2>
          <div class="input-group">
            <input type="text" required />
            <label for="">Username</label>
          </div>
          <div class="input-group">
            <input type="email" required />
            <label for="">Email</label>
          </div>
          <div class="input-group">
            <input type="password" required />
            <label for="">Password</label>
          </div>
          <div class="remember">
            <label
              ><input type="checkbox" /> I agree to the terms &
              conditions</label
            >
          </div>
          <button type="submit">Sign Up</button>
          <div class="signUp-link">
            <p>
              Already have an account?
              <a href="#" class="signInBtn-link">Sign In</a>
            </p>
          </div>
        </form>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>
